<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: Arial, sans-serif; /* 设置字体 */
      background-color: #f4f4f4; /* 设置背景颜色 */
      margin: 0;
      padding: 20px;
    }
    .container {
      max-width: 1200px; /* 设置最大宽度 */
      margin: 0 auto; /* 水平居中 */
      background-color: #fff; /* 设置背景颜色 */
      padding: 20px;
      border-radius: 8px; /* 设置圆角边框 */
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 设置阴影效果 */
    }
    .card_container {
      display: flex;
      flex-wrap: wrap;
    }
    .card {
      border: 1px solid #ccc;
      border-radius: 5px;
      background-color: lightgreen; /* 设置背景颜色 */
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 设置阴影效果 */
      padding: 10px;
      margin: 10px;
      width: 300px;
    }
    h1 {
      text-align: center;
      color: #333; /* 设置标题颜色 */
      font-size: 28px; /* 设置标题字体大小 */
      margin-bottom: 20px; /* 设置标题下边距 */
    }
    p {
      color: #666; /* 设置文本颜色 */
      font-size: 16px; /* 设置字体大小 */
      line-height: 1.6; /* 设置行高 */
      word-wrap: break-word;
    }
  </style>
</head>
<body>
  <div class="container">
    <a href='/'> 返回首页 </a><br>
    <h1>SIG ALARM</h1>
    <hr>
    <div class="card_container" id="card_container">
    </div>
    <hr>
    <h3>日志</h3>
    <p id="logs"></p>
  </div>


  <script>
    document.addEventListener("DOMContentLoaded", function() {
      fetch("/sigalarm_state_cards")
        .then(response => response.json())
        .then(data => {
          let card_container = document.getElementById('card_container');
          data.forEach(item => {
            const card = document.createElement('div');
            card.setAttribute("class", "card");

            const h3 = document.createElement("h3");
            h3.textContent = item.name;
            card.appendChild(h3);

            const url = document.createElement("p");
            url.textContent = `${item.url}`;
            card.appendChild(url);

            const last_time = document.createElement("p");
            last_time.textContent = `最近检测: ${item.last_time}`;
            card.appendChild(last_time);

            const last_state = document.createElement("p");
            last_state.textContent = `上次变动: ${item.last_change}`;
            card.appendChild(last_state);
            
            const meeting = document.createElement("p");
            meeting.textContent = `下次会议: ${item.meeting_time} ${item.meeting}`;
            card.appendChild(meeting);

            const contacts = document.createElement("p");
            contacts.textContent = `联系人: ${item.contacts}`;
            card.appendChild(contacts);

            card_container.appendChild(card);
          });
        })
        .catch(error => {
            console.error("获取数据时出错:", error);
        });

        fetch("/sigalarm_logs")
          .then(response => response.json())
          .then(data => {
            var logs = document.getElementById("logs");
            logs.innerHTML = data.data;
        })
        .catch(error => {
            console.error("获取数据时出错:", error);
        });
      });
  </script>
</body>
</html>